<template>
<div id="app">
  <el-row v-if="isLogin">
    <el-col :span="24">
      <app-header></app-header>
    </el-col>
  </el-row>
  <el-row v-if="isLogin" style="height:100%;width:100%;padding-bottom:60px; overflow:hidden;">
    <el-col :span="2" style="height:100%;">
      <app-siderbar></app-siderbar>
    </el-col>
    <el-col :span="22" style="height:100%;">
      <app-content style="height:100%;overflow-y:auto;padding:0 10px;position:relative;"></app-content>
    </el-col>
  </el-row>
  <router-view v-if="!isLogin"></router-view>
</div>
</template>

<script>
import AppHeader from './layout/app-header.vue';
import AppSiderbar from './layout/app-siderbar.vue';
import AppContent from './layout/app-content.vue';

import {
  mapGetters
} from 'vuex';

export default {
  computed: {
    ...mapGetters(['isLogin'])
  },
  components: {
    AppHeader,
    AppSiderbar,
    AppContent
  }
};
</script>

<style>
body {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
